<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Konva</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/konva@4.0.0/konva.min.js"></script>
    <script>
      const stage = new Konva.Stage({
        container: 'app',
        width: 500,
        height: 500,
      });
      const layer1 = new Konva.Layer();

      const circle = new Konva.Circle({
        x: 200,
        y: 200,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
      });

      const ellipse = new Konva.Ellipse({
        x: 200,
        y: 200,
        radiusX: 100, // 椭圆的长轴
        radiusY: 50, // 椭圆的短轴
        stroke: 'red',
        draggable: true,
      });

      layer1.add(ellipse);
      layer1.add(circle);
      layer1.draw();

      stage.add(layer1);
    </script>
  </body>
</html>
